<template>
  <el-dialog
    :title="'角色[' + role_name + ']授权'"
    :visible.sync="dialog_visible"
  >
    <div style="max-height: 500px; overflow-y: scroll">
      <el-tree
        ref="tree"
        :data="moduleData"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRoletModule, getModuleIdByRole } from "@/api/right_roles";
import { getlist } from "@/api/right_module";

import g from "@/utils/utilFn";
export default {
  name: "rolesAdd",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    role_id: {
      type: Number,
      default: 0,
    },
    role_name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      moduleData: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "module_name",
      },
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  created() {
    // this.getList();
  },
  mounted() {
    // this.getList();
  },
  watch: {
    role_id(newValue, oldValue) {
      if (newValue) {
        this.defaultCheckedKeys = [];
        this.moduleData = [];
        this.getList(() => {
          this.getModuleIdByRole(newValue);
        });
      }
    },
  },
  methods: {
    getList(fn) {
      this.listLoading = true;
      getlist().then((response) => {
        var data = response.data;
        console.log(data);
        this.moduleData = g.T.toTree(data, "children", "guid", "pguid");
        fn && fn.apply();
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    getModuleIdByRole(role_id) {
      this.listLoading = true;
      getModuleIdByRole({ role_id }).then((response) => {
        var data = response.data;
        console.log(data);
        var treedata = g.changeToArrays(data, "module_id");
        //选出叶子节点id
        var treeLeaf = this.getLeaf(this.moduleData, treedata);
        this.defaultCheckedKeys = treeLeaf;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    getLeaf(moduleData, treedata) {
      //选出叶子节点id
      moduleData = moduleData || [];
      treedata = treedata || [];
      var treeLeef = [];
      for (var i = 0, len = treedata.length; i < len; i++) {
        var module_id = treedata[i];
        var bool1 = g.T.isHave(moduleData, "children", function (it) {
          if (!it.children && it.id == module_id) {
            return true;
          } else {
            return false;
          }
        });
        if (bool1) {
          treeLeef.push(module_id);
        }
      }
      return treeLeef;

      //选出叶子节点id结束
    },
    cancel() {
      this.dialog_visible = false;
    },
    submit() {
      var data = this.$refs["tree"].getCheckedKeys();
      var data1 = this.$refs["tree"].getHalfCheckedKeys();
      var data2 = g.merge(data, data1);
      var module_ids = data2.join(",") || "";

      var param = {
        role_id: this.role_id,
        module_ids: module_ids,
      };
      updateRoletModule(param).then((response) => {
        if (response.data > 0) {
          setTimeout(() => {
            this.dialog_visible = false;
            this.$message({
              type: "success",
              message: "角色授权成功!",
            });
            // this.$emit("success", param);
          }, 200);
        } else {
          this.$message({
            type: "info",
            message: "角色授权失败",
          });
        }
      });
    },
  },
};
</script>
